<template>
  <div>

    <div v-show="dialog_visible">
      <div class="progress" v-if="this.i!==0"><el-progress :text-inside="true" :stroke-width="26" :percentage="num_progress"></el-progress></div>
      <div class="progress" v-else><el-progress :text-inside="true" :stroke-width="26" :percentage="num_progress_1"></el-progress></div>
    </div>

    <div class="selectWord" v-show="dialogText_visible">
      <el-card style="background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);">
        <div style="color: #fff;"><icon class="el-icon-s-help"></icon>单词总数</div>
        <div style=" display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
          <div style="padding: 10px 10px;font-weight: bold;font-size: 38px;color: white;margin-right: 5px">{{ wordtTotal }}</div>
          <div style="font-size: 20px">名词<el-tag style="font-size: 20px;" class="ml-5">{{n}}</el-tag></div>
          <div style="font-size: 20px">动词<el-tag type="success" style="font-size: 20px" class="ml-5">{{v}}</el-tag></div>
          <div style="font-size: 20px">形容词<el-tag type="info" style="font-size: 20px" class="ml-5">{{adj}}</el-tag></div>
          <div style="font-size: 20px">副词<el-tag type="warning" style="font-size: 20px" class="ml-5">{{adv}}</el-tag></div>
          <div style="font-size: 20px">介词<el-tag type="danger" style="font-size: 20px" class="ml-5">{{j}}</el-tag></div>

          <div style="font-size: 20px">必考词<el-tag style="font-size: 20px;" class="ml-5">{{gride_must}}</el-tag></div>
          <div style="font-size: 20px">基础词<el-tag type="success" style="font-size: 20px" class="ml-5">{{gride_base}}</el-tag></div>
          <div style="font-size: 20px">高中词汇<el-tag type="info" style="font-size: 20px" class="ml-5">{{gride_senior}}</el-tag></div>
          <div style="font-size: 20px">四级词汇<el-tag type="warning" style="font-size: 20px" class="ml-5">{{gride_ct4}}</el-tag></div>
          <div style="font-size: 20px">六级词汇<el-tag type="danger" style="font-size: 20px" class="ml-5">{{gride_ct6}}</el-tag></div>
          <div style="font-size: 20px">超纲词汇<el-tag type="danger" style="font-size: 20px" class="ml-5">{{gride_over}}</el-tag></div>
        </div>
      </el-card>
        <div class="select" style="margin: 30px auto;width: 730px">
          <div style="font-size: 16px;color: #ffffff;margin-bottom: 10px;margin-left: 8px;">请选择您所要背单词的单元或词性或类别(单选多选都可以)，不选则默认背全部单词</div>
          <el-select v-model="unit" placeholder="选择单元" class="ml-5">
            <el-option
                v-for="item in units"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #86a8d9; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
          <el-select v-model="part" placeholder="根据词性查询" class="ml-5">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #86a8d9; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
          <el-select v-model="gride" placeholder="分类显示" class="ml-5">
            <el-option
                v-for="item in grides"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #86a8d9; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
          <el-button type="warning" @click="reset"class="ml-5" >重置</el-button>
        </div>
      <div class="text" style="width: 465px;margin: 180px auto; color: white;font-size: 30px;font-weight: 600;">业精于勤荒于嬉，行成于思毁于随!</div>
     <div class="btn" style="display: flex;justify-content: center;align-items: center">
       <el-button class="ml-5" type="primary" @click="load" style="width: 120px;height: 60px;font-size: 22px;font-weight: 600;margin-bottom: 120px;">开 始</el-button>
       <el-button  class="ml-10" @click="$router.push('/unKnowWord')" style="width: 80px;height: 40px;font-size: 16px;margin-bottom: 120px;background-color: #c9def8;color: #020509;border: 1px solid chartreuse">背错词</el-button>
     </div>
    </div>

    <div class="mid" v-show="dialog_visible">
      <div class="lable">{{gride}}</div>
      <div class="word">{{word}}</div>
      <div><span class="tip">词性：</span><span class="mean" style="color: #3F5EFB">{{part}}</span></div>
      <div class="selection"><div><span class="tip">词义1：</span><span class="mean">{{mean}}</span> </div>
        <div v-if="mean2"><span class="tip">词义2：</span><span class="mean">{{mean2}}</span> </div>
        <div v-if="mean3"><span class="tip">词义3：</span><span class="mean">{{mean3}}</span></div></div>
      <el-button @click="aload" type="primary" size="medium" class="nextButton">Next</el-button>
      <el-button @click="unknow" type="danger" size="mini" >不认识</el-button>
    </div>

  </div>
</template>

<script>
export default {
  name: "word_learn",

  data() {
    return {
      tableData: [],
      total:"",
      pageNum: 1,
      pageSize: 1000,
      word: "",
      mean: "",
      mean2:"",
      mean3:"",
      gride:"",
      unit:"",
      part: "",
      num_progress_1:"",
      i:0,
      wordTotal:"",
      n:"",
      v:"",
      adj:"",
      adv:"",
      j:"",
      gride_must:"",
      gride_base:"",
      gride_senior:"",
      gride_ct4:"",
      gride_ct6:"",
      gride_over:"",
      form: {},
      unknown:{},
      num_progress:0,
      success_num:1,
      units:[{
        value: 'unit1',
        label: 'unit1'
        },
        {
          value: 'unit2',
          label: 'unit2'
        },
        {
          value: 'unit3',
          label: 'unit3'
        },
        {
          value: 'unit4',
          label: 'unit4'
        },
        {
          value: 'unit5',
          label: 'unit5'
        },
        {
          value: 'unit6',
          label: 'unit6'
        },
        {
          value: 'unit7',
          label: 'unit7'
        },
        {
          value: 'unit8',
          label: 'unit8'
        },
        {
          value: 'unit9',
          label: 'unit9'
        },
        {
          value: 'unit10',
          label: 'unit10'
        },
        {
          value: 'unit11',
          label: 'unit11'
        },
        {
          value: 'unit12',
          label: 'unit12'
        },
        {
          value: 'unit13',
          label: 'unit13'
        },
        {
          value: 'unit14',
          label: 'unit14'
        },
        {
          value: 'unit15',
          label: 'unit15'
        },
        {
          value: 'unit16',
          label: 'unit16'
        },{
          value: 'unit17',
          label: 'unit17'
        },
        {
          value: 'unit18',
          label: 'unit18'
        },
        {
          value: 'unit19',
          label: 'unit19'
        },
        {
          value: 'unit20',
          label: 'unit20'
        },
        {
          value: 'unit21',
          label: 'unit21'
        },
        {
          value: 'unit22',
          label: 'unit22'
        },
        {
          value: 'unit23',
          label: 'unit23'
        },
        {
          value: 'unit24',
          label: 'unit24'
        },
        {
          value: 'unit25',
          label: 'unit25'
        },
        {
          value: 'unit26',
          label: 'unit26'
        },
        {
          value: 'unit27',
          label: 'unit27'
        },
        {
          value: 'unit28',
          label: 'unit28'
        },
        {
          value: 'unit29',
          label: 'unit29'
        },
        {
          value: 'unit30',
          label: 'unit30'
        },
      ],
      options: [{
        value: 'n(名词)',
        label: '名词'
      }, {
        value: 'V(动词)',
        label: '动词'
      }, {
        value: 'adj(形容词)',
        label: '形容词'
      }, {
        value: 'adv(副词)',
        label: '副词'
      }, {
        value: '介词',
        label: '介词'
      }],
      grides: [{
        value: '必考词',
        label: '必考词'
      }, {
        value: '基础词',
        label: '基础词'
      }, {
        value: '高中词汇',
        label: '高中词汇'
      },{
        value: '四级词汇',
        label: '四级词汇'
      }, {
        value: '六级词汇',
        label: '六级词汇'
      }, {
        value: '超纲词汇',
        label: '超纲词汇'
      }],
      dialog_visible: false,
      dialogText_visible: true
    }
  },

  methods: {
    doClose() {
    this.showDialog(false)
    this.showDialogText(true)
    this.reset()
    },
    open() {
      this.$alert('恭喜！您已经背完啦！！', '返回', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `祝贺: 词汇量+++++++++++++++++1`
          });
          this.doClose()
        }
      });
    },
      open1() {
      this.$notify({
        title: '恭喜！',
        message: '您已经背完了'+this.success_num+'遍单词',
        type: 'success'
      });
    },
    showDialog(visible){
      this.dialog_visible = visible;
    },
    showDialogText(visible){
      this.dialogText_visible = visible;
    },
    unknow(){
      console.log(this.word)
      this.request.get("/word/unknown",{
        params: {
          word: this.word,
          know: 1,
        }
      }).then(res=>{
        if (res ==='200') {
          this.$message.success("已添加到错题本")
        } else {
          this.$message.success("已添加到错题本")
        }
      })
    },
    load(){
      this.showDialog(true)
      this.showDialogText(false)
      const i = this.i;
      this.request.get("/word/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          unit: this.unit,
          part:this.part,
          gride:this.gride
        }
      }).then(res => {
        this.tableData = res.data.records
        // console.log(this.tableData)
        this.word=res.data.records[i].word
        this.mean=res.data.records[i].mean
        this.gride=res.data.records[i].gride
        this.part=res.data.records[i].part
        this.mean2=res.data.records[i].mean2
        this.mean3=res.data.records[i].mean3
        this.unit=res.data.records[i].unit
        this.total = res.data.total
         this.id=res.data.records[i].id
        this.num_progress_1=(1/ this.total)*100
      })
    },
    aload(){
      if (this.i+1 ===this.total){
        let i=this.i=0
      }else {
        let i = this.i++
      }
      let i = this.i
      this.word=this.tableData[i].word
      this.mean=this.tableData[i].mean
      this.gride=this.tableData[i].gride
      this.part=this.tableData[i].part
      this.mean2=this.tableData[i].mean2
      this.mean3=this.tableData[i].mean3
      this.unit=this.tableData[i].unit
      this.num_progress=((i+1)/ this.total)*100
      if (this.num_progress===100){
        this.open1()
        this.open()
        this.success_num++
      }
      console.log(this.word)
    },
    reset() {
      this.part = ""
      this.gride = ""
      this.unit = ""
    },
  },
  created() {
    this.request.get("/echarts/members").then(res => {
      this.n=res.data[5]
      this.v=res.data[6]
      this.adj=res.data[7]
      this.adv=res.data[8]
      this.j=res.data[9]
      this.wordtTotal=res.data[10]
      this.gride_must=res.data[26]
      this.gride_base=res.data[27]
      this.gride_senior=res.data[28]
      this.gride_ct4=res.data[29]
      this.gride_ct6=res.data[30]
      this.gride_over=res.data[31]
    })
  },
}

</script>

<style scoped>
.selectWord{
  margin: 1px auto;
  width: 1490px;
  background-color: #fc7a7a;
}
.lable{
  background-color: #409EFF;
  color: white;
  margin: 5px auto;
  width: 85px;
  height: 28px;
  line-height: 28px;
  border-radius: 5px;
}

.mid{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin: 22px auto;
  padding-top: 60px;
  max-width: 40%;
  max-height: 700px;
  background-color: rgb(102 102 102 / 20%);
  text-align: center;
}
.word{
  padding-top: 20px;
  font-size: 40px;
}
.mean{
  padding-top: 20px;
  font-size: 23px;
  color: #666;
  line-height: 60px;
}
.tip{
  font-size: 20px;
  line-height: 18px;
  color: black;
}
.selection{
  padding-top: 30px;
 padding-left: 14%;
  margin: 5px 100px;
  background-color: #a9ccf1;
  text-align: left;
  min-height: 280px;
  border-radius: 10px;
}
.nextButton{
  width: 94px;
  height: 40px;
  font-size: 19px;
  margin: 80px auto;
}
.progress{
  margin: 1px 10px;
}
</style>

